<template>
  <n-modal
    v-model:show="showModal"
    preset="card"
    :style="styleObject"
    :title="title"
  >
    <template #header-extra>
      <!-- FIXME 与 X 样式割裂 -->
      <NButton quaternary @click="trigger">
        <ZIcon v-show="!fullscreen" name="FullScreenIcon"> </ZIcon>
        <ZIcon v-show="fullscreen" name="ResumeScreenIcon"> </ZIcon>
      </NButton>
    </template>

    <slot></slot>
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </n-modal>
</template>

<script lang="ts" setup>
import { useBoolean } from "@/hooks/bool";
import { computed } from "vue";
import { ZModalMethods } from "./typings";

export interface ZModalProps {
  width?: number | string;
  title: string;
}
const props = withDefaults(defineProps<ZModalProps>(), {
  title: "",
  width: "80%",
});

const [showModal, open, close] = useBoolean();
const modalMethods: ZModalMethods = {
  open,
  close,
};

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [fullscreen, _, __, trigger] = useBoolean();
const styleObject = computed(() =>
  fullscreen.value ? { width: "100%", height: "100vh" } : { width: props.width }
);
/* expose */
defineExpose(modalMethods);
</script>
